<script setup lang="ts">
import TabBar from '@/components/Tabbar/index.vue';
import { useConfigStore } from '@/stores/config'
definePageMeta({
  layout: 'default-search',
  // title: "详情",
  // i18n: "menu.details",
});
const configStore = useConfigStore();
const like = ref(false);
const gameArr = ref([
  {
    id: 1,
    name: "游戏1",
    type: "jl",
    img: "~/assets/images/1.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 2,
    name: "游戏2",
    type: "luva",
    img: "~/assets/images/2.jpg",
    logo: '/img/luva.png',
    like: true
  },
  {
    id: 3,
    name: "游戏3",
    type: "pp",
    img: "~/assets/images/3.jpg",
    logo: '/img/pp.png',
    like: false
  },
  {
    id: 4,
    name: "游戏1",
    type: "pg",
    img: "~/assets/images/1.jpg",
    logo: '/img/pg.png',
    like: false
  },
  {
    id: 5,
    name: "游戏2",
    type: "jl",
    img: "~/assets/images/2.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 6,
    name: "游戏3",
    type: "luva",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 7,
    name: "游戏1",
    type: "jl",
    img: "~/assets/images/1.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 8,
    name: "游戏2",
    type: "pp",
    img: "~/assets/images/2.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 9,
    name: "游戏3",
    type: "pg",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 10,
    name: "游戏3",
    type: "pp",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 11,
    name: "游戏3",
    type: "jl",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 12,
    name: "游戏12",
    type: "luva",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 13,
    name: "游戏13",
    type: "pp",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 14,
    name: "游戏14",
    type: "luva",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
  {
    id: 15,
    name: "游戏15",
    type: "pg",
    img: "~/assets/images/3.jpg",
    logo: '/img/jl.png',
    like: false
  },
]);

const active = ref(0);
const tabArr = [
  {
    id: 0,
    name: '全部'
  },
  {
    id: 1,
    name: '推荐'
  },
  {
    id: 2,
    name: '喜欢'
  },
]
const search = ref('')
</script>

<template>
  <!-- <div class=""> -->
  <TabBar v-if="!configStore.searchStatus" :tabs="tabArr" :activeIndex="active" @updateActiveIndex="active = $event"
    :offset-top="46" />
  <van-field v-else v-model="search" placeholder="输入关键词" class="mt-46">
    <template #left-icon>
      <van-icon name="search" color="#b6b6b6" />
    </template>
    <template #right-icon>
      <div class="search color-#303030">搜索</div>
    </template>
  </van-field>
  <div class="main   px-15 overflow-y-auto overflow-hidden " :class="!configStore.searchStatus ? 'mt-50' : ''">
    <div v-if="active == 0">
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="v in gameArr" :key="v.id">
          <div class="relative">
            <img class="w-30 h-30 absolute left-0 top-0" :src="v.logo" />
            <img class="w-full h-90 rounded-t-10" src="~/assets/images/3.jpg" />
            <div class="w- full px-7 flex justify-between items-center bg-#ffffff rounded-b-10">
              <div class=" text-12 py-3 my-5 mx-0 overflow-hidden whitespace-nowrap text-ellipsis">{{
                v.name }}
              </div>
              <van-icon size="18" @click.stop="v.like = !v.like" :name="v.like ? 'like' : 'like-o'"
                :color="v.like ? 'red' : '#cccccc'" />
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div v-if="active == 1">

    </div>
    <div v-if="active == 2">

    </div>
  </div>
  <!-- </div> -->
</template>
<style lang="css" scoped>
.search::before {
  display: inline-block;
  content: '';
  width: 1px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -4px;
  background: #d7d7d7;
}

.main {
  height: calc(100vh - 100px);
}

::v-deep .van-grid-item:nth-child(odd) .van-grid-item__content {
  margin-right: 9px;
}

::v-deep .van-field__left-icon {
  background: #f5f6f8;
  margin-right: 0;
  margin-right: -3px;
  padding-top: 5px;
  padding-left: 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

::v-deep .van-grid-item__content .van-grid-item__content--center {
  position: relative;
}

::v-deep .van-grid-item__content {
  padding: 0;
  margin-bottom: 10px;
  background: transparent;
}

::v-deep .van-tabs__wrap {
  margin-bottom: 20px;
}

::v-deep .van-field__control {
  font-size: 15px;
}

::v-deep .van-cell__value {
  padding: 5px 10px;
  border: 1px solid #f5f6f8;
  /* border-radius: 5px; */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #f5f6f8;

}

.active-tab {
  color: #539cd6;
  border: 1px solid #539cd6;
  background: #ffffff;
  padding: 0;
}
</style>
